<template>
	<view class="Messagedetail">
		<headertop title="详情" str1="oridei" :back1="back1"></headertop>
		<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/eeeimage@2x.png" mode="widthFix"
			class="Messagedetailback"></image>
		<view :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}"></view>
		<view class="titlec">
			<view class="t1">
				{{contentobj['title']}}
			</view>
			<view class="t2">
				{{timestamp(contentobj['createtime']*1000)}}
			</view>
		</view>
		<view class="ffmode">
			<view class="nr">
				<up-parse :content="contentobj['content']"></up-parse>
			</view>
		</view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom,
		onUnload
	} from "@dcloudio/uni-app";
	const back1 = ref('')
	import ulm, {
		$api
	} from '@/ulm';
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#6FBAFE'
		} else {
			back1.value = ''
		}
	})
	const barHeight = ref('')
	const contentobj = ref({})
	const statusBarHeight = ref('')
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onLoad((opt) => {
		init(opt.id)
	})
	async function init(id) {
		const res = await $api.msgfile({
			id
		})
		if (res.code == 1) {
			contentobj.value = res.data
		}
	}

	function timestamp(time) {
		let date = new Date(time); // 将时间戳转换为Date对象
		let year = date.getFullYear();
		let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份加1并补零
		let day = String(date.getDate()).padStart(2, '0'); // 补零
		let hours = String(date.getHours()).padStart(2, '0'); // 补零
		let minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
		let seconds = String(date.getSeconds()).padStart(2, '0'); // 补零

		let customDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		console.log(customDate);
		return customDate
	}
</script>

<style lang="scss">
	.Messagedetail {
		width: 100%;
		overflow: hidden;
		position: relative;

		.Messagedetailback {
			width: 100%;
			position: absolute;
			z-index: -1;
		}

		.titlec {
			width: 686rpx;
			margin: auto;
			margin-top: 44rpx;

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				margin-top: 20rpx;
			}
		}

		.ffmode {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(169, 227, 255, 0.31);
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			margin-top: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #4E5969;
			overflow: hidden;

			.nr {
				width: 686rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 30rpx;
			}
		}
	}
</style>